import React, { useState, useEffect } from 'react'
import { Radio, Popconfirm, Modal, Button, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import './index.css'
import axios from 'axios';
import { aUrl } from '../../../static/axios_url';
import ShippMag from '../OrderMag/ShippMag';
export default function OrderMag() {
    const location = useLocation()
    let navigate = useNavigate();
    const [data, setData] = useState([])
    let [allzj, setAllzj] = useState(0)//所有商品的总价
    useEffect(() => {
        //如果是首页礼拜五商城来的 执行下边代码
        if (location.state) {
            let arrs = []
            arrs.push({
                name: '礼拜五商城',
                good: []
            })
            arrs[0].good.push({
                title: location.state[0].g_name,
                g_g: location.state[0].g_g,
                new_price: location.state[0].price,
                g_num: location.state[0].g_num,
                s_id: location.state[0].s_id,
            })
            //es6写法
            // arrs.push({
            //     name: '礼拜五商城',
            // })
            // arrs[0].good = [{
            //     title: location.state[0].g_name,
            //     g_g: location.state[0].g_g,
            //     new_price: location.state[0].price,
            //     g_num: location.state[0].g_num,
            //     s_id: location.state[0].s_id,
            // }]
            setData(arrs)
        } else {//从购物车订单来
            axios.post(aUrl + '/shopcar/shopData', {
                u_id: 1
            }).then(res => {
                let data = res.data
                //给每个店偶添加一个总价属性 值为0
                for (var i = 0; i < data.length; i++) {
                    data[i].zj = 0
                }
                //zj为每个商品金额的和
                for (var i = 0; i < data.length; i++) {
                    for (var j = 0; j < data[i].good.length; j++) {
                        data[i].zj += data[i].good[j].new_price * 1 * data[i].good[j].g_num
                    }
                }
                setData(data)
                //计算所有商品的总金额
                for (var i = 0; i < data.length; i++) {
                    allzj += data[i].zj
                }
                setAllzj(allzj)
            })
        }
    }, [])
    // 发票单选按钮
    const [value, setValue] = useState(0);
    function onChange(e) {
        console.log(e.target.value);
        setValue(e.target.value);
    };
    // 次日达时间表
    const [date, setDate] = useState([])
    useEffect(() => {
        setDate(['11:00-14:00', '12:00-15:00', '13:00-16:00', '14:00-17:00', '15:00-18:00', '16:00-19:00', '17:00-20:00', '18:00-21:00', , '19:00-22:00'])
    }, [])
    //次日达时间选择框
    function content() {
        return (
            <div>
                <table className='om-tab' border="1" cellspacing="0">
                    <tr>
                        {date.map((data, i) => {
                            return (
                                <td onClick={seldate(i)} key={i}>{data}</td>
                            )
                        })}
                    </tr>
                </table>
            </div>)
    }
    //选择的时间
    const [selDate, setSeldate] = useState('11:00-14:00')
    function seldate(i) {
        return () => {
            //修改seldate为选择的时间
            let neWdata = [...date]//可选择的时间
            let neWseldate = [...selDate]//展示的时间
            neWseldate = neWdata[i]//展示的时间为选择的时间
            setSeldate(neWseldate)
        }
    }
    //修改时间确认按钮
    function confirm() {
        console.log(1);
    }

    //提交订单按钮
    function qyModal() {
        let newData = [...data]
        let magArr = []//用来储存选中的商品信息
        //将每个店铺的id、总价、商品信息空数组  加入到magArr数组中
        for (var i = 0; i < newData.length; i++) {
            magArr.push({
                shop_id: newData[i].s_id,
                zj: newData[i].zj,
                good: [],
            })
            //将每个商品的id、数量  加入到magArr.good数组中
            for (var j = 0; j < newData[i].good.length; j++) {
                magArr[i].good.push({
                    g_id: newData[i].good[j].id,
                    g_num: newData[i].good[j].g_num
                })
            }
        }
        console.log(magArr);
        axios.post(aUrl + '/shopcar/addBill', {
            addBill: magArr
        }).then(res => {
            console.log(res);
            if (res.data.code === 1) {
                message.success('提交成功')
                navigate('/shop/paysuc', { state: allzj })
            }
        })
        //处理后的数据格式
        // [
        //     {
        //         shop_id: xxx, 店铺id
        //         zj: xxx,      店铺总价
        //         good: [{ g_id: xxx, g_num: xxx },{ car_id: xxx, g_num: xxx }]  商品信息
        //     },
        //     {
        //         shop_id: xxx,
        //         zj: xxx,
        //         good: [{ g_id: xxx, g_num: xxx },{ car_id: xxx, g_num: xxx }]
        //     }
        // ]


    };

    //控制配送区域模态框
    // const [isModal, setModal] = useState(false);
    // const qyOk = () => {
    //     setModal(false);
    // };
    // const qyCancel = () => {
    //     setModal(false);
    // };
    return (
        <div style={{ width: 1278, marginLeft: 320 }}>
            {/* 收货人信息 */}
            <>
                <ShippMag go='ordermag' />
                {/* 通过go参数 表示时是ordewmag组件在添加地址 */}
            </>
            {/* 商品信息 */}
            <h3 className='om-h3'>商品信息</h3>
            {data.map((mag, i_d) => {
                return (
                    <>
                        <div key={i_d} className='om-shopmag'>
                            <ul>
                                <li><span>{mag.name}</span><span>规格</span><span>单价</span><span>数量</span><span>金额</span></li>
                                {mag?.good.map((good, i_g) => {
                                    return (
                                        <li key={i_g}>
                                            <img src={good.img} alt="" />
                                            <span>{good.title}</span>
                                            <span>{good.g_g}个装</span>
                                            <span>￥{good.new_price}</span>
                                            <span>{good.g_num}</span>
                                            <span>￥{good.new_price * good.g_num}</span>
                                        </li>
                                    )
                                })}
                                <li><i>商品金额:</i><em>￥{mag.zj}</em></li>
                            </ul>
                        </div>
                        <div>
                            {/* 开票信息 */}
                            <div className='om-kp'>
                                <h3 className='om-h3'>开票信息</h3>
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio style={{ font: 14, color: '#666666' }} value={1}>不需要</Radio>
                                    <Radio style={{ font: 14, color: '#666666' }} value={2}>个人</Radio>
                                    <Radio style={{ font: 14, color: '#666666' }} value={3}>单位</Radio>
                                </Radio.Group>
                                <div className='om-fptt'>
                                    发票抬头: <input style={{ width: 370, height: 35, border: 'none', border: '1px solid #D3D3D3', }} type="text" /> <span style={{ color: '#EE855D' }}>*</span>请填写后认真核对发票信息</div>
                            </div>
                            {/* 添加订单备注 */}
                            <div className='om-tjdd'>
                                <h3 className='om-h3'>添加订单备注</h3>
                                <input placeholder='限45个字，请填写有关商品、支付、发票等信息' type="text" />
                            </div>
                        </div>
                    </>
                )
            })}


            {/* 次日达 */}
            <div className='om-crd'>
                <h3 className='om-h3' style={{ color: '#498E3D' }}>次日达·礼拜五专享</h3>
                <p>请选择送达时间： 2016年9月18日{selDate}</p>
                <Popconfirm
                    title={content}
                    onConfirm={confirm}
                    okText="确定"
                    cancelText="取消"
                    placement="bottom"
                    icon={false}
                >
                    <span className='om-crd-rq'><i className='fa fa-calendar'></i> 点击修改</span>
                </Popconfirm>,
            </div>

            {/* 付款 */}
            <div om-fk>
                <ul>
                    <li className='om-fk-li1'>实付金额: <span>￥{allzj}</span></li>
                    <li className='om-fk-li2'>订单完成后可获得积分: <span>{allzj}积分</span></li>
                    <li><Button style={{ width: 150, height: 50, margin: '40px 0 40px 1129px', backgroundColor: '#F08200', border: 'none', borderRadius: 5, font: '18px/46px ""', color: '#FFFFFF', cursor: 'pointer' }} type="primary" onClick={qyModal}>
                        提交订单
                    </Button></li>
                </ul>
            </div>
            <>

                {/* 配送距离错误模态框 */}
                {/* <Modal title="温馨提示" visible={isModal} width={687} height={572}
                    footer={[
                        <Button style={{ width: 191, height: 35, backgroundColor: '#498E3D', border: 'none', borderRadius: 5, font: '18px/30px ""', color: '#FFFFFF', cursor: 'pointer', marginRight: 100 }} key="back" onClick={qyCancel}>
                            返回购物车修改
                        </Button>,
                        <Button style={{ width: 191, height: 35, backgroundColor: '#F08200', border: 'none', borderRadius: 5, font: '18px/30px ""', color: '#FFFFFF', cursor: 'pointer', marginRight: 100 }} key="submit" type="primary" onClick={qyOk}>
                            修改配送区域
                        </Button>,
                    ]}
                >
                    <div className='om-tsk' style={{ position: 'relative', height: 300 }}>
                        <div><img src={Gth} alt="" /></div>
                        <p className='om-tsk-p1'>新疆哈密瓜(8kg装)、葡萄(150g)</p>
                        <p className='om-tsk-p2'>无法送到指定区域，请到购物车中删除商品或修改配送地址后重新提交订单</p>
                    </div>
                </Modal> */}
            </>
        </div >
    )

}
